<script setup>
import {ref} from 'vue';

const modules = ref([
  {
    name: '发布任务',
    url: '../../static/renwudating.png'
  },
  {
    name: '找搭子',
    url: '../../static/lianggexiaoren.png'
  },
  {
    name: '发布闲置',
    url: '../../static/jiaoyi.png'
  },
  {
    name: '立flag',
    url: '../../static/quanziguanli.png'
  },
  {
    name: '心情打卡',
    url: '../../static/quanziguanli.png'
  },
])
const navigateTo = name => {
  uni.navigateTo({
    url: `/pages/publish/module/children?name=${name}`
  })
}
</script>

<template>
  <div class="publish">
    <div class="container">
      <div v-for="(Module,i) in modules" :key="i" class="module" @click="navigateTo(Module.name)">
        <image :src="Module.url" class="icon"></image>
        <div class="name">{{ Module.name }}</div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.publish > .container {
  width: 100%;
  padding-right: 30px;
  padding-left: 30px;
  height: calc(75px * 5 + 15px * 5);
  position: absolute;
  bottom: 50px;
  // outline: 1px solid red;
}

.publish > .container > .module {
  width: calc(100vw - 60px);
  height: 75px;
  color: white;
  margin-bottom: 15px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  position: absolute;
  bottom: 0;
  transition: 1s;
}

.publish > .container > .module:first-child {
  background-color: #f3a683;
}

.publish > .container > .module:nth-child(2) {
  background-color: #f7d794;
}

.publish > .container > .module:nth-child(3) {
  background-color: #778beb;
}

.publish > .container > .module:nth-child(4) {
  background-color: #e77f67;
}

.publish > .container > .module:last-child {
  background-color: #C3DC36;
}

.publish > .container > .module > .icon {
  width: 50px;
  height: 50px;
  margin-right: 35px;
  margin-left: 35px;
}

@for $i from 1 through 4 {
  .publish > .container > .module:nth-child(#{$i}) {
    transform: translateY($i * -90px);
  }
}

</style>